<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'详情'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <!-- 工期 -->
        <div class="analyItem">
            <p class="analyItemTit tx-center">工期</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">合同</span>
                    <span>{{otherTotalRate.designer_sign_time?ellipsis(otherTotalRate.designer_sign_time,10):'--'}}</span>

                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">延期单</span>
                    <span>{{otherTotalRate.construction_delay?otherTotalRate.construction_delay:'0'}}</span>

                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">应完</span>
                    <span>{{otherTotalRate.finshTime?ellipsis(otherTotalRate.finshTime,10):'--'}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">超期</span>
                    <span>{{otherTotalRate.finisDay?Math.abs(otherTotalRate.finisDay):'0'}}天</span>
                </p>
            </div>
        </div>
        <!-- 款项 -->
        <div class="analyItem">
            <p class="analyItemTit tx-center">款项</p>
            <div class="analyItemCon" >
                <div v-for="(item,index) in receiveMoneyList" :key="index">
                    <p class="col-md-3">
                        <span class="cLightGray pr8">应收第{{item.period}}期款{{Number(item.type)===4?'-质':''}}</span>
                        <span></span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">金额</span>
                        <span>{{item.receivable}}</span>元
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">应回</span>
                        <span>{{ellipsis(item.receivable_time,10)}}</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">超期</span>
                        <span>{{Math.abs(item.day)}}</span>天
                    </p>
                </div>
            </div>
        </div>
        <!-- 现场 -->
        <div class="analyItem">
            <p class="analyItemTit tx-center">现场</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <!-- {{(completmet.shouldCompletedMoney / 10000).toFixed(2)}}W -->
                    <span class="cLightGray pr8">监订完成率</span>
                    <span>{{otherTotalRate.jl?(otherTotalRate.jl*100).toFixed(0):'0'}}</span>%
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">项订完成率</span>
                    <span>{{otherTotalRate.xc?(otherTotalRate.xc*100).toFixed(0):'0'}}</span>%
                    <!-- <span>{{otherTotalRate.xc | toFixed(0)}}</span>% -->

                </p>
            </div>
        </div>
        <!-- 工人 -->
        <div class="analyItem">
            <p class="analyItemTit tx-center">工人</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">监订完成率</span>
                    <span>{{otherTotalRate.rg?(otherTotalRate.rg*100).toFixed(0):'0'}}</span>%
                </p>
            </div>
        </div>
        <!-- 材料 -->
        <div class="analyItem">
            <p class="analyItemTit tx-center">材料</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">工程量分配率</span>
                    <span>{{otherTotalRate.cl?(otherTotalRate.cl*100).toFixed(0):'0'}}</span>%
                </p>
            </div>
        </div>
        <!-- 工艺 -->
        <div class="analyItem">
            <p class="analyItemTit tx-center">工艺</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <!-- {{(completmet.shouldCompletedMoney / 10000).toFixed(2)}}W -->
                    <span class="cLightGray pr8">完成率</span>
                    <span>{{otherTotalRate.zl?(otherTotalRate.zl*100).toFixed(0):'0'}}</span>%
                </p>
            </div>
        </div>
        <!-- 摄像头 -->
        <div class="analyItem">
            <p class="analyItemTit tx-center">摄像头</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <!-- {{(completmet.shouldCompletedMoney / 10000).toFixed(2)}}W -->
                    <span class="cLightGray pr8">在线率</span>
                    <span>{{cameraTotalRate?cameraTotalRate*100:'0'}}%</span>
                </p>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
            </div>
        </div>

    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { findRaidoByOrdeoNo, getPointByPro, getReceiveMoney } from '../../Resources/Api'

export default {
    data () {
        return {
            otherTotalRate: {}, // 其他率
            cameraTotalRate: 0, // 摄像头
            receiveMoneyList: {} // 款项

        }
    },
    created () {
        // 其他
        this.findRaidoByOrdeoNo()
        // 摄像头
        this.getPointByPro()
        // 款项
        // this.getReceiveMoney()
    },
    computed: {
        ...mapGetters(['userInfo', 'leftInfo'])
    },
    methods: {
        // 其他
        findRaidoByOrdeoNo () {
            findRaidoByOrdeoNo({
                orderNo: this.$route.query.orderno// '105-513'
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.otherTotalRate = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 摄像头
        getPointByPro () {
            getPointByPro({
                orderNo: this.$route.query.orderno// '105-513'
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.cameraTotalRate = res.data.Body.totalPoint.totalRate
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 款项
        getReceiveMoney () {
            getReceiveMoney({
                orderNo: this.$route.query.orderno
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.receiveMoneyList = res.data.Body.receiveMoneyList
                }
            }).catch(err => {
                console.log(err)
            })
        },
        ellipsis (value, num) {
            if (!value) return ''
            if (value.length > num) {
                return value.slice(0, num) + ''
            }
            return value
        },
        // 时间转换
        formatDate (value) {
            let date = new Date(value)
            let y = date.getFullYear()
            let MM = date.getMonth() + 1
            MM = MM < 10 ? ('0' + MM) : MM
            let d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            return y + '-' + MM + '-' + d
        }
    },
    watch: {
        leftInfo () {
        },
        $route () {
            // 其他
            this.findRaidoByOrdeoNo()
            // 摄像头
            this.getPointByPro()
            // 款项
            this.getReceiveMoney()
        }
    }
}
</script>
